<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>文件列表</title>
    <script src="/lib/jquery/jquery.min.js"></script>
    <script src="/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="/layer/layer.js"></script>
    <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css"  />
    <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css"  />
    <link rel="stylesheet" type="text/css" href="/grid/css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="/grid/css/grid.css" />
    <style type="text/css">
        .btn-primary-new {
            color: #fff;
            background-color: #673AB7;
            border-color: #9e87c7;
        }
        .view-display{
            display: none;
        }
    </style>
</head>
<body style="overflow: hidden;">

<div class="row">
    <div class="col-lg-12" >
        <div style="margin-top: 5px;">
            <ol class="breadcrumb">
                <li><a href="#">主页</a></li>
                <li><a href="#">对象列表</a></li>
            </ol>
        </div>
    </div>
    <div class="col-lg-12" style="height: 50px;">
        <div>
            <div style="width: 80%;float: left;">
                <button type="button" id="btnUpload" class="btn btn-primary"><i class="fa fa-cloud-upload" aria-hidden="true" style=" color: #faf9f9;font-size: 16px;"></i> 本地上传</button>
                <button type="button" id="btnCreateDir" class="btn btn-info"><i class="fa fa-folder" aria-hidden="true" style=" color: #faf9f9;font-size: 16px;"></i> 新建文件夹</button>

                <#if dir??&&dir!="" >
                    <button type="button" id="btnBack" class="btn btn-warning"><i class="fa fa-fast-backward" aria-hidden="true" style=" color: #faf9f9;font-size: 16px;"></i> 返回上级</button>
                </#if>
            </div>
            <div style="float: right;">
                <span class="label label-info glyphicon glyphicon-th-list" id="spanList" style="cursor: pointer;"> 列表</span>
                <span class="label label-success glyphicon glyphicon-th-large" id="spanGrid" style="cursor: pointer;"> 网格</span>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div style=" height: 520px;overflow-y: auto;">
                <div id="listView" <#if view!="list"> class="view-display" </#if>  >
                <!-- Table -->
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <td style="width: 5%;"><input type="checkbox" aria-label="..." /> 全选</td>
                        <td>文件名称</td>
                        <td>类型</td>
                        <td>最后修改时间</td>
                        <td>大小</td>
                    </tr>
                    </thead>
                    <tbody>
                    <#list list as file>
                        <tr>
                            <td style="text-align: center;"><input type="checkbox" /></td>
                            <td><a href="${file.url}" <#if file.mediaType!="dir"> target="_blank" </#if>>${file.name}</a></td>
                            <td>${file.type}</td>
                            <td>${file.lastModifiedTime}</td>
                            <td>${file.size}</td>
                        </tr>
                    </#list>
                    </tbody>
                </table>
            </div>
            <div id="gridView" <#if view=="list"> class="view-display" </#if> >
            <main>
                <section class="content content--nandi">
                    <div class="grid">
                        <#list list as file>
                            <#if file.mediaType=="dir">
                                <div class="grid__item grid_dir">
                                    <div class="folder folder--nandi">
                                        <div class="folder__icon folder__icon--perspective" title="${file.name}">
                                            <i class="fa fa-folder" aria-hidden="true" style="font-size: 90px;color: #1654e480;"></i>
                                        </div>
                                        <h3 class="folder__caption" data-title="${file.name}">
                                            <#if file.name?length gt 10>
                                                ${file.name[0..10]}...
                                                <#else>
                                                    ${file.name}
                                            </#if>
                                        </h3>
                                    </div>
                                </div>
                                <#elseif file.mediaType=="text">
                                    <div class="grid__item">
                                        <div class="folder folder--nandi">
                                            <div class="folder__icon folder__icon--perspective" title="${file.name}">
                                                <i class="fa fa-file" aria-hidden="true" style="font-size: 90px;color: #75aef7;"></i>
                                            </div>
                                            <h3 class="folder__caption"><#if file.name?length gt 10>
                                                ${file.name[0..10]}...
                                                <#else>
                                                    ${file.name}
                                            </#if></h3>
                                        </div>
                                    </div>
                                    <#elseif file.mediaType=="xls" || file.mediaType=="xlsx">
                                        <div class="grid__item">
                                            <div class="folder folder--nandi">
                                                <div class="folder__icon folder__icon--perspective" title="${file.name}">
                                                    <i class="fa fa-file-excel-o" aria-hidden="true" style="font-size: 90px;color: #75aef7;"></i>
                                                </div>
                                                <h3 class="folder__caption">
                                                    <#if file.name?length gt 10>
                                                        ${file.name[0..10]}...
                                                        <#else>
                                                            ${file.name}
                                                    </#if>
                                                </h3>
                                            </div>
                                        </div>
                                        <#else>
                                            <div class="grid__item">
                                                <div class="folder folder--nandi">
                                                    <div class="folder__icon folder__icon--perspective" title="${file.name}">
                                                        <i class="fa fa fa-file" aria-hidden="true" style="font-size: 90px;color: #f7d075;"></i>
                                                    </div>
                                                    <h3 class="folder__caption">
                                                        <#if file.name?length gt 10>
                                                            ${file.name[0..10]}...
                                                            <#else>
                                                                ${file.name}
                                                        </#if>
                                                    </h3>
                                                </div>
                                            </div>
                            </#if>
                        </#list>

                    </div>
                </section>
            </main>

        </div>
    </div>
    </div>
    <!-- /.col-lg-12 -->
</div>



<div style="display: none;position: absolute;">

<form action="/oss/material/uploadBySys" id="uploadForm" target="uploadIframe" enctype="multipart/form-data" method="post">
    <input name="file" type="file" id="file"/>
    <input type="hidden" name="dir" id="dir" value="${dir}" />
</form>

<iframe  name="uploadIframe" id="uploadIframe" ></iframe>
</div>

<script type="text/javascript">
    $(function () {
        //创建文件夹
        $("#btnCreateDir").on("click",function (e) {
            e.preventDefault();
            layer.prompt({
                formType: 0,
                value: '',
                title: '创建文件夹'
            }, function(value, index, elem){
                $.post("/oss/material/createDir",{dir:$("#dir").val(),pro:value},function (d) {
                    if(d.code=="8200"){
                        layer.msg('创建成功', {
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            layer.closeAll();
                            window.location.reload();
                        });
                    }else{
                        layer.msg(d.message);
                    }
                })
                //layer.close(index);
            });

        })

        $(".grid_dir").on("dblclick",function (e) {
            var id=$("#dir").val();
            var that=$(this);
            var dir=id+"/"+that.find("h3").data("title");
            window.location="/oss/list/?dir="+dir;
        })

        $("#spanList").on("click",function (e) {
            e.preventDefault();
            $("#listView").show("slow");
            $("#gridView").hide();
            $.get("/oss/list/toogleView?view=list",function () {

            })

        })
        $("#spanGrid").on("click",function (e) {
            e.preventDefault();
            $("#gridView").show("slow");
            $("#listView").hide();
            $.get("/oss/list/toogleView?view=grid",function () {

            })

        })
        $("#btnBack").on("click",function (e) {
            e.preventDefault();
            window.history.go(-1);
        })
        $("#btnUpload").on("click",function (e) {
            e.preventDefault();
            $("#file").click();
        })

        $("#file").on("change",function () {
            $("#uploadForm")[0].submit();
            $("#uploadIframe").on("load",function () {
                var that=$(this);
                var framebody=$(this).contents().find("body");
                var ret=framebody.html();
                //是否存在pre标签
                if(framebody.find("pre").length>0){
                    ret=framebody.find("pre").html();
                }
                var res=JSON.parse(ret);
                if(res.code=="8200"){
                    layer.msg("上传成功");
                    setTimeout(function () {
                        window.location.reload();
                    },1000)
                }else{
                    layer.msg(res.message);
                }
                that.off();
            })

        })

        $(".btn-danger").on("click",function (e) {
            e.preventDefault();
            layer.confirm("确定删除该文件吗?",function () {
                layer.msg("尚未实现.")
            })
        })

    })
</script>

</body>
</html>